<template>
  <div style="box-sizing: border-box;padding: 0px 10px;">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div>
              <span>项目详情</span>
            </div>
          </template>
          <div style="height: 400px;">
            <el-scrollbar>
              <product-detail :id="state.projectId"></product-detail>
            </el-scrollbar>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div>
              <span>项目库</span>
            </div>
          </template>
          <div style="height: 400px;">
            <el-scrollbar>
              <product-library :id="state.projectId"></product-library>
            </el-scrollbar>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px;margin-bottom: 10px;" :gutter="10">
      <el-col :span="12">
        <project-meet-minutes :id="state.projectId"></project-meet-minutes>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div>
              <span>项目历史记录</span>
            </div>
          </template>
          <div style="height: 400px;">
            <el-scrollbar>
              <project-history :id="state.projectId"></project-history>
            </el-scrollbar>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProductDetail from '@/views/projectManage/components/productDetail'
import { onBeforeMount, reactive } from 'vue'
import { useRoute } from 'vue-router'
import ProductLibrary from '@/views/projectManage/components/productLibrary'
import ProjectMeetMinutes from '@/views/projectManage/components/projectMeetMinutes'
import ProjectHistory from '@/views/projectManage/components/projectHistory'

export default {
  name: 'projectDetailManage',
  setup () {
    const route = useRoute()
    const state = reactive({
      projectId: 0
    })
    onBeforeMount(() => {
      state.projectId = route.query.id
    })
    return {
      state
    }
  },
  components: {
    ProjectHistory,
    ProjectMeetMinutes,
    ProductLibrary,
    ProductDetail
  }
}
</script>

<style scoped>

</style>
